<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>H5+JS+CSS3实现七夕言情——布局的自适应动态调整</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/pageA.css">
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/Swipe.js"></script>
</head>
<body>
    <div id="content">
        <ul id="content-wrap">
            <li>
                <div class="a_background">
                    <div class="a_background_top"></div>
                    <div class="a_background_middle"></div>
                    <div class="a_background_bottom"></div>
                </div>
            </li>
            <li>页面2</li>
            <li>页面3</li>
        </ul>
        <div id="boy" class="charector"></div>
    </div>

    <script>
        var swipe= Swipe($("#content"));

        // // 获取数据
        // var getValue = function(className) {
        //     var $elem = $(''+ className +'');
        //     // 走路的路线坐标
        //     return {
        //         height: $elem.height(),
        //         top: $elem.position().top
        //     };
        // }

        // // 路的Y轴
        // var pathY = function() {
        //     var data = getValue(".a_background_middle");
        //     return data.top + data.height/2;
        // }();

        // var $boy = $("#boy");
        // var boyHeight = $boy.height();

        // // 修正男孩的正确位置 = 路的中间位置 - 小孩的高度，25是个修正值
        // $boy.css({
        //     top:pathY - boyHeight +25
        // });

        var $elem = $(".a_background_middle");
        var pathY = $elem.position().top + $elem.height()/2;
        var $boy = $("#boy");
        var boyHeight = $boy.height();

        $boy.css({
            top:pathY - boyHeight + 25,
        });

    </script>
</body>
</html>